<template>
  <div class="app-container" style="padding-top: 5px;">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="项目标段" prop="institutionCode">
        <el-select
          v-model="queryParams.institutionCode"
          placeholder="请选择"
          size="small"
          style="width: 240px" @change="handleBidChange"
        >
          <el-option-group
            v-for="group in bidOptions"
            :key="group.name"
            :label="group.name">
            <el-option
              v-for="item in group.bids"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item label="日　　期" prop="salaryDate">
        <el-date-picker
          v-model="queryParams.salaryDate"
          align="right"
          type="month"
          value-format="yyyy-MM"
          placeholder="选择日期" style="width: 240px"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="施工队伍">
        <el-select clearable filterable
           v-model="queryParams.battalionId"
           placeholder="请选择施工队伍"
           style="width: 250px;">
          <el-option
            v-for="item in battalionOptions"
            :key="item.battalionId"
            :label="item.battalionName"
            :value="item.battalionId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="施工班组">
        <el-select clearable filterable
           v-model="queryParams.teamId"
           placeholder="请选择施工班组"
           style="width: 240px;">
          <el-option
            v-for="item in teamOptions"
            :key="item.teamId"
            :label="item.teamName"
            :value="item.teamId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="岗位工种">
        <el-select clearable filterable
           v-model="queryParams.postId"
           placeholder="请选择岗位工种"
           style="width: 240px;">
          <el-option
            v-for="item in postOptions"
            :key="item.postId"
            :label="item.postName"
            :value="item.postId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <i-frame :src="reportUrl"/>

  </div>
</template>

<script>
  import { initSalaryView } from "@/api/site/labour/report";
  import iFrame from "@/components/iFrame/index";
  import { dropDownList as battalionDropDownList } from  "@/api/site/labour/battalion";
  import { dropDownList as teamDropDownList } from  "@/api/site/labour/team";
  import { dropDownList as postDropDownList } from  "@/api/site/labour/post";
  import { formatDate } from "@/utils";

  export default {
    name: "ReportSalary",
    components: { iFrame },
    data() {
      return {
        // 查询参数
        queryParams: {
          reportUrl: null,
          institutionCode: null,
          salaryDate: '',
          battalionId: '',
          teamId: '',
          postId: '',
        },
        // 标段下拉框
        bidOptions:[],
        battalionOptions: [],
        teamOptions: [],
        postOptions: [],
        reportUrl: "",
      }
    },
    created() {
      document.title = this.$route.query.reportName;
      this.queryParams.reportUrl = this.$route.query.reportUrl;
      this.queryParams.institutionCode = this.$route.query.institutionCode;
      this.init();
    },
    methods: {
      /** 初始化标段下拉框 */
      init() {
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        month = month > 9 ? month : "0" + month;
        let nowMonth = year + "-" + month;
        this.queryParams.salaryDate = nowMonth;
        initSalaryView({
          institutionCode: this.queryParams.institutionCode,
          reportType: this.reportType}).then(response => {
          this.bidOptions = response.bids;
          this.battalionOptions = response.battalions;
          this.teamOptions = response.teams;
          this.postOptions = response.posts;
          this.loadReport();
        });
      },
      // 标段下拉框发生变化
      handleBidChange() {
        this.loadBattalion();
        this.loadTeam();
        this.loadPost();
      },
      // 加载施工队伍
      loadBattalion() {
        battalionDropDownList({institutionCode: this.queryParams.institutionCode}).then(response => {
          this.battalionOptions = response.battalions;
        });
      },
      loadTeam() {
        teamDropDownList({institutionCode: this.queryParams.institutionCode}).then(response => {
          this.teamOptions = response.teams;
        });
      },
      loadPost() {
        postDropDownList({institutionCode: this.queryParams.institutionCode}).then(response => {
          this.postOptions = response.posts;
        });
      },
      // 查询按钮
      handleQuery() {
        this.loadReport();
      },
      // 重置查询表单
      resetQuery() {
        let date = new Date(new Date() - 30 * 24 * 3600 * 1000);
        let lastDate = date.getFullYear() + (date.getMonth() + 1 < 10 ? "0" : "") + "-" + (date.getMonth() + 1);
        this.queryParams.salaryDate = lastDate;
        this.queryParams.battalionId = '';
        this.queryParams.teamId = '';
        this.queryParams.postId = '';
        this.loadReport();
      },
      // 加载报表
      loadReport() {
        let url = "";
        if (this.queryParams.institutionCode == undefined) {
          this.reportUrl = url;
        } else {
          url = this.queryParams.reportUrl
            + "&institutionCode=" + this.queryParams.institutionCode
            + "&battalionId=" + this.queryParams.battalionId
            + "&teamId=" + this.queryParams.teamId
            + "&postId=" + this.queryParams.postId
            + "&salaryDate=" + this.queryParams.salaryDate;
          this.reportUrl = url;
        }
      }
    }
  }
</script>
